<app-content-header></app-content-header>

<div class="cil__block">

  <img class="img" src="assets/images/centaur/change.png" />

  <div class="cil__user-id-block">
    <div class="cil__user-id">{{'USER.USERNAME' | i18n}}</div>
    <div class="cil__user-name">{{userName}}</div>
  </div>

  <form class="cil__form" nz-form [formGroup]="validateForm" nzLayout="horizontal">
    <!-- 更改别人密码不需要输入新密码 -->
    <nz-form-item *ngIf="!isChangeOtherPassword()">
      <nz-form-label>{{'USER.OLD_PASSWORD' | i18n}}</nz-form-label>
      <nz-form-control nzHasFeedback>
        <input type="password" nz-input formControlName="passwordOld" name="passwordOld" />
        <nz-form-explain *ngIf="passwordOldCtrl.dirty">
          <ng-container *ngIf="passwordOldCtrl.hasError('required')">
            {{ 'VALIDATION.REQUIRED' | i18nParams: {name: 'USER.OLD_PASSWORD'} | lowercase }}
          </ng-container>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label>{{'USER.NEW_PASSWORD' | i18n}}</nz-form-label>
      <nz-form-control nzHasFeedback>
        <input type="password" nz-input formControlName="password" name="password" />
        <nz-form-explain *ngIf="passwordCtrl.dirty">
          <ng-container *ngIf="passwordCtrl.hasError('required'); else second">
            {{ 'VALIDATION.REQUIRED' | i18nParams: {name: 'USER.NEW_PASSWORD'} | lowercase }}
          </ng-container>
          <ng-template #second>
            <ng-container *ngIf="passwordCtrl.hasError('minlength'); else third">
              {{ 'VALIDATION.MIN_LENGTH' | i18n: {length: 8} | lowercase }}
            </ng-container>
          </ng-template>
          <ng-template #third>
            <ng-container *ngIf="passwordCtrl.hasError('pattern')">
              {{ 'VALIDATION.PATTERN.PASSWORD' | i18n }}
            </ng-container>
          </ng-template>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label>{{'USER.NEW_PASSWORD_CONFIRM' | i18n}}</nz-form-label>
      <nz-form-control nzHasFeedback>
        <input type="password" nz-input formControlName="passwordCF" name="passwordCF" />
        <nz-form-explain *ngIf="passwordCFCtrl.dirty">
          <ng-container *ngIf="passwordCFCtrl.hasError('required'); else second">
            {{ 'VALIDATION.REQUIRED' | i18nParams: {name: 'USER.NEW_PASSWORD_CONFIRM'} | lowercase }}
          </ng-container>
          <ng-template #second>
            <ng-container *ngIf="passwordCFCtrl.hasError('minlength'); else third">
              {{ 'VALIDATION.MIN_LENGTH' | i18n: {length: 8} | lowercase }}
            </ng-container>
          </ng-template>
          <ng-template #third>
            <ng-container *ngIf="passwordCFCtrl.hasError('pattern'); else forth">
              {{ 'VALIDATION.PATTERN.PASSWORD' | i18n }}
            </ng-container>
          </ng-template>
          <ng-template #forth>
            <ng-container *ngIf="passwordCFCtrl.hasError('mustMatch')">
              {{ 'USER.VALIDATION.PASSWORD_CONFIRM_NOT_MATCH' | i18n }}
            </ng-container>
          </ng-template>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
  </form>

  <button
    nz-button
    nzShape="round"
    nzType="primary"
    [nzLoading]="isLoading"
    appDebounceClick
    (debounceClick)="submit()">{{'BTN.SUBMIT' | i18n}}</button>

</div>
